ReactのMain Concept：5. State and Lifecycle
ReactDOM.render()で更新した
この章では毎秒更新されるタイマーをもつClockコンポーネントを再利用可能にしていく
問題：UI（tick()の中）でClockに毎秒Dateを渡している。UIがClockの詳細な実装をしている
Clock自身で時計を進めてほしい
Stateをつかうとそういうことができる
privateである
componentによって完全にコントロールされる
Converting a Function to a Class
functional componentをclassに変換する
code:before.jsx
function Clock(props) {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {props.date.toLocaleTimeString()}.</h2>
</div>
);
}
code:after.jsx
class Clock extends React.Component {
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.props.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
機械的に置換できる
1. 同名のClockクラスを作る。これはReact.Componentを継承する
2. render()を生やす。何もしない。
3. functionの中身をまるっとrender()にカット＆ペーストする
4. render()内のpropsをthis.propsで置換する
5. 残たからっぽのfunctionの宣言function Clock(props){}を消す
render()はupdateが起こるたびに呼ばれるが、<Clock />を同じDOMノードにrenderする限り、Clockクラスのインスタンスは1つだけが使われる。
local stateやlifecycle hooksが使える
Adding Local State to a Class
dateをpropsからstateにするステップ
1. render()内のthis.props.dateをthis.state.dateに置換する
2. classのコンストラクタを追加し、this.stateに初期値を与える
classコンポーネントは常にsuper(props)を使って基底クラスを呼ばなければならない
3. <Clock />要素からdate propを消す
いままではpropsでdateを渡していたが、Clock自身がdateをもつようになった
ここまでだと初期化された時間のまま動かないので、毎秒更新されるようにする
Adding Lifecycle Methods to a Class
componentが破壊されるときにリソースが開放されることは重要
ClockがDOMに初回にレンダリングされるとき毎回呼ばれるタイマーを設定する
Reactでは"mounting"と呼ばれる
Clockによって作られたDOMが除去されたときにタイマーをクリアしたい
componentがmount/unmountされたときに走るコンポーネントクラスの特別なメソッドを宣言する
このようなメソッドをlifecycle methodsという
どのような順序で動作するかの説明あり
Using State Correctly
setState()について知るべき3つのこと
Stateを直接変更するな
setState()でしか変更できない
コンストラクタだけは例外的にstateを設定できる
Stateの更新は非同期で行われるかも
なので、過去のstateに依存した計算は単純にはできない
setStateに関数を渡すと一つ前のstateを引数に渡してくれるので、そう書けばいける
Stateの更新はマージされる
this.setState()を複数の場所で呼び出した場合、結果はマージされる
stateの変数を異なる箇所のthis.setState()がその変数だけ変更しても、他の変数には影響しないということ
The Data Flows Down
あるコンポーネントの親やこのコンポーネントも、そのコンポーネントがステートフルなのかステートレスなのか知らない。関数なのかクラスなのかも知らない
stateはカプセル化されていると言われる理由はこれ
トップダウンとか、単一方向のデータフローとか言われる
どのstateも、それをもつcomponentははっきりしている
そのstateからくるUIやデータは、treeの下にしかいかない
イメージ
コンポーネントツリーはpropsの滝のようなもの
コンポーネントのstateは湧き水で、任意の点で水どうしをくっつけられる
ただし、下流にしか流れない
Reactのアプリ作るときにステートフルかスタートレスかを考えるのはコンポーネントの詳細な実装をするとき。このコンポーネントは時事刻々変化する
ステートフルなコンポーネントの中でスタートレスなコンポーネントも当然使える